<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云计算在线实践平台 - 登录</title>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- 自定义样式 -->
    <link href="css/login.css" rel="stylesheet">
</head>
<body>
    <!-- 背景动画元素 -->
    <div class="tech-background">
        <div class="floating-servers">
            <i class="fas fa-server"></i>
            <i class="fas fa-database"></i>
            <i class="fas fa-cloud"></i>
            <i class="fas fa-network-wired"></i>
        </div>
        <div class="data-streams"></div>
    </div>

    <div class="login-container">
        <div class="login-box">
            <div class="login-header">
                <i class="fas fa-cloud"></i>
                <h1>云计算在线实践平台</h1>
            </div>
            
            <!-- 切换按钮 -->
            <div class="toggle-container">
                <button class="toggle-btn active" data-form="login">登录</button>
                <button class="toggle-btn" data-form="register">注册</button>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm" class="auth-form active">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                        <input type="text" id="username" class="form-control" placeholder="用户名" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-lock"></i></span>
                        <input type="password" id="password" class="form-control" placeholder="密码" required>
                    </div>

                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-login">登录</button>
                </div>
                <div id="loginError" class="error-message"></div>
            </form>

            <!-- 注册表单 -->
            <form id="registerForm" class="auth-form">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                        <input type="text" id="regUsername" class="form-control" placeholder="用户名" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                        <input type="email" id="regEmail" class="form-control" placeholder="电子邮箱" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-lock"></i></span>
                        <input type="password" id="regPassword" class="form-control" placeholder="密码" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-lock"></i></span>
                        <input type="password" id="regConfirmPassword" class="form-control" placeholder="确认密码" required>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-login">注册</button>
                </div>
                <div id="registerError" class="error-message"></div>
            </form>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script src="js/login.js"></script>
</body>
</html> 
</html> 